<template>
	<div class="ll-page">
		<div class="content">
			<div class="middle">
				<n-grid x-gap="12" cols="3" item-responsive responsive="screen" style="height: 100%">
					<n-grid-item span="2" style="height: 100%">
						<div class="top">
							<div class="top-icon">
								<img class="top-icon-img" src="~@/assets/images/icon_bm_sale@2x.png" />
							</div>
							<div class="top-title">探店中心设置</div>
						</div>
						<n-grid
							x-gap="12"
							cols="1"
							item-responsive
							responsive="screen"
							style="height: 100%; padding-bottom: 80px"
						>
							<n-grid-item span="1">
								<div class="left">
									<div style="flex: 1">
										<div class="middle-title">
											<div class="middle-title-font">分佣规则设置</div>
											<div class="tip-img">
												<img src="~@/assets/images/icon_tdzx_zy@2x.png" />
											</div>
											<div class="tip-img-desc">分佣规则是主播探店申请时的统一分佣规则</div>
										</div>
										<div class="c-form">
											<n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
												<n-form-item label="佣金规则：" path="commissionType">
													{{
														model.commissionType === '1'
															? '一口价'
															: model.commissionType === '2'
															? '一口价+CPS'
															: model.commissionType === '3'
															? 'CPS'
															: '无'
													}}
													（
													{{ model.selectedLevelStr.substr(1) }}
													）
												</n-form-item>
												<!--												<n-form-item label="佣金规则：" path="commissionType">-->
												<!--													<n-radio-group-->
												<!--														v-model:value="model.commissionType"-->
												<!--														name="commissionType"-->
												<!--														disabled-->
												<!--													>-->
												<!--														<n-space>-->
												<!--															<n-radio value="1">一口价</n-radio>-->
												<!--															<n-radio value="2">一口价+CPS</n-radio>-->
												<!--															<n-radio value="3">CPS</n-radio>-->
												<!--														</n-space>-->
												<!--													</n-radio-group>-->
												<!--												</n-form-item>-->
												<!--												<n-form-item label="佣金等级：" path="selectedLevel">-->
												<!--													<n-checkbox-group v-model:value="model.selectedLevel" disabled>-->
												<!--														<n-space>-->
												<!--															<n-checkbox value="1">大达人佣金</n-checkbox>-->
												<!--															<n-checkbox value="2">中大人佣金</n-checkbox>-->
												<!--															<n-checkbox value="3">小达人佣金</n-checkbox>-->
												<!--														</n-space>-->
												<!--													</n-checkbox-group>-->
												<!--												</n-form-item>-->
												<div class="middle-title-font" style="padding-top: 30px">探店规则设置</div>
												<n-form-item label="任务规则：" path="content">
													<n-input
														v-model:value="model.content"
														placeholder="请输入任务规则文案（将展示给申请探店的主播查看）"
														type="textarea"
														:autosize="{
															minRows: 6,
															maxRows: 8
														}"
														minlength="1"
														maxlength="500"
														show-count
													/>
												</n-form-item>
											</n-form>
										</div>
									</div>
									<div
										style="
											padding: 10px 0 10px 20px;
											border-top: 1px solid #f0f0f0;
											border-radius: 0px 0px 8px 8px;
										"
									>
										<n-button type="primary" @click="validForm">确认</n-button>
									</div>
								</div>
							</n-grid-item>
						</n-grid>
					</n-grid-item>
					<n-grid-item span="1" style="padding-bottom: 80px">
						<div class="right">
							<div class="middle-title">
								<div class="middle-title-font">分佣规则设置</div>
								<div class="tip-img">
									<img src="~@/assets/images/icon_tdzx_zy@2x.png" />
								</div>
								<div class="tip-img-desc">显示在平台供C端查看的探店规则</div>
							</div>
							<div class="img_phone_view">
								<img class="phone-view" src="~@/assets/images/img_phone_view@2x.png" />
							</div>
						</div>
					</n-grid-item>
				</n-grid>
			</div>
		</div>
	</div>
</template>

<script>
// 导入API接口
import { getLatestConfig, update } from '../../api/tdSeekConfig';
import { useMessage } from 'naive-ui';

export default {
	name: 'TdSeekConfig',
	components: {},
	data() {
		return {
			message: useMessage(),
			model: {
				id: null,
				content: null,
				commissionType: null,
				selectedLevel: [],
				selectedLevelStr: ''
			},
			rules: {
				// commissionType: {
				// 	required: true,
				// 	trigger: 'change',
				// 	message: '请选择佣金规则'
				// },
				// selectedLevel: {
				// 	type: 'array',
				// 	required: true,
				// 	trigger: 'change',
				// 	message: '请选择佣金等级'
				// },
				content: {
					required: true,
					trigger: ['blur', 'input'],
					message: '请输入任务规则'
				}
			}
		};
	},
	created() {
		getLatestConfig(null).then((res) => {
			this.model.id = res.data.id;
			this.model.content = res.data.content;
			this.model.commissionType = res.data.commissionType.toString();
			if (res.data.firstCommission === 1) {
				this.model.selectedLevel.push('1');
				this.model.selectedLevelStr += '+大达人佣金';
			}
			if (res.data.secondCommission === 1) {
				this.model.selectedLevel.push('2');
				this.model.selectedLevelStr += '+中达人佣金';
			}
			if (res.data.thirdCommission === 1) {
				this.model.selectedLevel.push('3');
				this.model.selectedLevelStr += '+小达人佣金';
			}
		});
	},
	mounted() {},
	methods: {
		validForm(e) {
			e.preventDefault();
			this.$refs.formRef.validate((errors) => {
				if (errors) {
					console.log(errors);
				} else {
					if (this.model.id) {
						// 更新
						const params = {
							id: this.model.id,
							commissionType: this.model.commissionType,
							firstCommission: this.model.selectedLevel.includes('1') ? 1 : 0,
							secondCommission: this.model.selectedLevel.includes('2') ? 1 : 0,
							thirdCommission: this.model.selectedLevel.includes('3') ? 1 : 0,
							content: this.model.content
						};
						update(params).then((res) => {
							if (res.code === 200) {
								this.message.success('操作成功');
							} else {
								console.log(res);
								this.message.error('操作失败');
							}
						});
					} else {
						// 新增
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.ll-page {
	width: 100vw;
	height: 100vh;
	padding: 16px;
	background-color: #ffffff;
	overflow: auto;

	.content {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #f3f6ff 0%, #fcfdff 100%);
		border-radius: 14px;

		.top {
			height: 60px;
			width: 100%;
			padding: 16px 0 0 20px;

			.top-icon {
				width: 40px;
				height: 40px;
				background: #1d6fe9;
				box-shadow: 0 7px 25px -6px #1d6fe9;
				border-radius: 16px;
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;

				.top-icon-img {
					width: 24px;
					height: 24px;
				}
			}

			.top-title {
				height: 100%;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40px;
				float: left;
				margin: 0 0 0 20px;
			}
		}

		.middle {
			width: 100%;
			height: 100%;
			padding: 0 20px 20px 0;

			.left {
				background: #ffffff;
				border-radius: 8px;
				border: 1px solid #f0f0f0;
				height: 100%;
				display: flex;
				flex-direction: column;
				margin-left: 20px;
				margin-top: 20px;
				.middle-title {
					width: 100%;
					padding: 20px;
				}

				.c-form {
					padding: 30px 20px 20px 20px;
				}
			}

			.right {
				height: 100%;
				background: #ffffff;
				border-radius: 8px;
				border: 1px solid #f0f0f0;
				position: relative;
				margin-top: 80px;
				.middle-title {
					width: 100%;
					padding: 20px;
				}

				.img_phone_view {
					width: 50%;
					position: relative;
					top: 6%;
					left: 26%;
				}
			}
		}

		.middle-title-font {
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 25px;
			padding: 0 0 10px 0;
		}

		.tip-img {
			float: left;
			img {
				width: 16px;
				height: 16px;
			}
		}
		.tip-img-desc {
			font-size: 14px;
			font-family: SFCompact-Regular, SFCompact;
			font-weight: 400;
			color: #f5894e;
			line-height: 16px;
			float: left;
		}
	}
}
</style>
